<template>
  <div>
    <el-table :data="userList" height="250" border>
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="nickname" label="昵称"> </el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <el-avatar :size="48" :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="ip" label="IP"> </el-table-column>
      <el-table-column prop="roles" label="角色列表"
        ><template slot-scope="scope">
          <el-tag
            type="primary"
            v-for="item in scope.row.roles"
            :key="item.id"
            >{{ item.name }}</el-tag
          >
        </template></el-table-column
      >
      <el-table-column prop="lastLoginTime" label="最后登录时间"
        ><template slot-scope="scope">
          {{ scope.row.lastLoginTime | dateFormat }}
        </template></el-table-column
      >
      <el-table-column prop="address" label="IP所在地"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="openEditRole(scope.row.roles, scope.row.id)"
            >修改角色</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="currentChange">
    </el-pagination>
    <!-- 修改角色对话框 -->
    <el-dialog title="修改角色" :visible.sync="roleDia" width="30%">
      <div class="roledia">
        <div>
          <el-tree
            ref="tree"
            :props="defaultProps"
            :data="roleOpt"
            show-checkbox
            node-key="id"
            :default-checked-keys="defaultChecked"
          >
          </el-tree>
        </div>
      </div>
       <span slot="footer" class="dialog-footer">
      <el-button @click="roleDia = false">取 消</el-button>
      <el-button type="primary" @click="editRole">确 定</el-button>
       </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentUserId: 0,
      userList: [],
      total: 0,
      current: 1,
      pageSize: 10,
      roleDia: false,
      roleOpt: [],
      roleIds: [],
      defaultProps: {
        children: "children",
        label: "nameZh",
      },
      defaultChecked: [],
      checked: [],
    };
  },
  created() {
    this.init();
    this.loadRoleOpt();
  },
  methods: {
    init() {
      let params = {
        current: this.current,
        pageSize: this.pageSize,
      };
      this.postRequest("/api/user/admin/list", params).then((res) => {
        if (res.flag) {
          this.userList = res.data.recodes;
          this.total=res.data.total
        }
      });
    },
    loadRoleOpt() {
      this.getRequest("/api/role/admin/listOpt").then((res) => {
        this.roleOpt = res.data;
      });
    },
    openEditRole(roles, id) {
      this.defaultChecked = roles.map((item) => item.id);
      this.currentUserId = id;
      this.roleDia = true;
    },
    editRole() {
      // 获得当前选中的节点
      let roleIds = this.$refs.tree.getCheckedKeys();
      let params = {
        id: this.currentUserId,
        roleIds: roleIds,
      };
      this.putRequest("/api/user/admin/editRole", params).then((res) => {
        this.roleDia = false;
        this.init();
      });
    },currentChange(current){
      this.current=current;
      this.init();
    }
  },
};
</script>
<style>
.roledia {
  margin: 0 auto;
  margin-bottom: 40px;
}
</style>